/**
 * Element UI 样式覆盖和性能优化
 * 注意：使用 !important 时需谨慎，仅在必要时使用
 */

// ========================================
// 面包屑样式优化
// ========================================
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

// ========================================
// 文件上传组件优化
// ========================================
.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

// ========================================
// 表格样式优化
// ========================================
.cell {
  .el-tag {
    margin-right: 0;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    min-width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0;
    }
  }
}

// ========================================
// 表格自适应宽度优化
// ========================================
// 让表格头部和内容根据容器宽度自适应撑开
.el-table {
  width: 100% !important;
  .cell {
    text-align: center;
  }

  // 表格头部 - 不设置overflow，避免出现滚动条
  .el-table__header-wrapper {
    width: 100% !important;
    overflow-x: hidden !important; // 隐藏表头滚动条

    .el-table__header {
      width: 100% !important;
      table-layout: fixed; // 使用固定布局确保表头表体对齐
    }
  }

  // 表格内容 - 只在这里设置overflow用于滚动
  .el-table__body-wrapper {
    width: 100% !important;
    overflow-x: auto;

    .el-table__body {
      width: 100% !important;
      table-layout: fixed; // 使用固定布局确保表头表体对齐
    }
  }

  // 固定列容器自适应
  .el-table__fixed,
  .el-table__fixed-right {
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper {
      .el-table__header,
      .el-table__body {
        table-layout: fixed; // 使用固定布局确保表头表体对齐
      }
    }
  }
}

// 表格列自适应宽度
.el-table__header-wrapper,
.el-table__body-wrapper {
  .el-table__header,
  .el-table__body {
    min-width: 100% !important;
  }
}

// ========================================
// 表格滚动条美化
// ========================================
.el-table__body-wrapper {
  // 横向滚动条
  &::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 5px;
    margin: 0 4px;
  }

  // 滚动条滑块
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0c4cc 0%, #a8abb2 100%);
    border-radius: 5px;
    border: 2px solid #f5f7fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    // hover效果
    &:hover {
      background: linear-gradient(180deg, #909399 0%, #606266 100%);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    // 激活状态（拖动时）
    &:active {
      background: linear-gradient(180deg, #606266 0%, #303133 100%);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
  }

  // 滚动条交叉角落
  &::-webkit-scrollbar-corner {
    background: #f5f7fa;
  }
}

// 表格容器的滚动条样式（防止出现双滚动条）
.el-table {
  &::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0c4cc 0%, #a8abb2 100%);
    border-radius: 5px;
    border: 2px solid #f5f7fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      background: linear-gradient(180deg, #909399 0%, #606266 100%);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    &:active {
      background: linear-gradient(180deg, #606266 0%, #303133 100%);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
  }
}

// ========================================
// 对话框定位修复
// ========================================
// 修复 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// ========================================
// 上传组件容器优化
// ========================================
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// ========================================
// 下拉菜单优化
// ========================================
.el-dropdown-menu {
  a {
    display: block;
  }
}

// ========================================
// 日期选择器修复
// ========================================
// 修复 filter-item 中的 UI bug
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// 修复日期选择器样式
.el-range-separator {
  box-sizing: content-box;
}

// ========================================
// 菜单折叠优化
// ========================================
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}

// ========================================
// 性能优化
// ========================================
// 减少重绘和回流
.el-table {
  .el-table__body-wrapper {
    will-change: transform;
  }
}

// 优化滚动性能
.el-scrollbar__wrap {
  overflow-x: hidden;
}

// ========================================
// 通用页面标题图标样式
// ========================================
.page-title {
  i {
    margin-right: 8px;
    color: #409eff;
  }
}
